<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				width: 100px;
				height: 100px;
				background-color: yellow;
				float: left;
			}

			.box2 {
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
				/*
				clear 用来清除其它浮动元素对当前元素的影响
				both 清除两侧浮动的影响
				*/
				clear: left;
				float: right;
			}

			.box3 {
				width: 300px;
				height: 300px;
				background-color: skyblue;
				clear: both;
			}

			.box4 {
				clear: both;
				border: 0.3125rem red solid;
			}

			.box4_son {
				float: left;
				width: 6.25rem;
				height: 6.25rem;
				background-color: blueviolet;
			}

			.clear {
				clear: both;
			}

			/*
			高度塌陷的
			解决方法 三
			使用伪类选择box4，在最后面添加一个hello字符。
			
			目前最好的解决方案，但是IE6不支持after伪类
			记得添加下面的 clearfix 样式
			*/
			.clearfix:after {
				/*添加一个内容*/
				content: '';
				display: block;
				clear: both;
			}
			
			/*为了兼容 IE6*/
			.clearfix{
				zoom: 1;
			}
		</style>
	</head>
	<body>
		<!-- 高度塌陷最终解决方案1 -->
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>

		<!--
		 高度塌陷解决方案2 
		 发生高度塌陷的父元素下，添加一个div，使用clear:both
		 可以解决。
		 基本没有副作用，同时兼容所有浏览器
		 
		 W3C推荐的方法
		 使用这种方式虽然可以解决问题，但是会在页面添加多余结构
		 -->
		<div class="box4 clearfix">
			<div class="box4_son"></div>
			<div class="clear"></div>
		</div>
	</body>
</html>
